<template>
    <div id="alipay">
        <div class="alipay_header">
            <div class="alipay_header_div1">
                <img style="height:35px;vertical-align: middle;" src="../../img/A_Qys_QIJfGPgAAAAAAAAAAAAAARQnAQ.png" alt="">
                &nbsp;
                <span style="font-size: 24px;color: #B3B3B3">|</span>
                &nbsp;
                <span style="font-size: 16px;">我的收银台</span>
            </div>
        </div>
        <div class="alipay_div1">
            <div style="height: 80px;width: 95%;margin: 0 auto">
                <div style="float:left;line-height:40px;">
                    <div>{{name}}</div>
                    <div>收款方：易游旅行</div>
                </div>
                <div style="float:right;line-height:80px;">
                    <span style="font-size: 32px;font-weight: bold;color:#3366CC">{{price}}元</span>
                </div>
            </div>
            <div class="alipay_div1_div1">
                <div style="width: 220px;margin: 0 auto;text-align: center;margin-top: 130px">
                    <span style="color: #B3B3B3">扫一扫付款（元）</span>
                    <p style="font-size: 32px;font-weight: bold;color:#3366CC">{{price}}</p>
                    <div class="alipay_qr_code">
                        <div class="qr_code">
                            <canvas id="QRCode_header"></canvas>
                        </div>
                        <div style="height: 70px;overflow:hidden;">
                            <img style="float:left;" src="../../img/微信图片_20220815094035.png" alt="">
                            <div style="margin-top: 10px;">
                                <span>打开手机支付宝</span>
                                <br>
                                <span>扫一扫继续支付</span>
                            </div>
                        </div>
                    </div>
                </div>
                <img class="alipay_div1_div1_usage" src="../../img/微信图片_20220815094018.png" alt="">
            </div>
            <div style="
                width: 1000px;
                margin: 0 auto;
                text-align: center;
                margin-top: 20px;
                line-height: 30px;
            ">
                <p style="font-size: 14px;color:#A6A6A6">ICP证：合字B2-20190046</p>
                <img src="../../img/2R3cKfrKqS.png" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AlipayViews',
    data () {
        return {
            // 订单名称
            name: '颐和园',
            // 支付二维码路径
            qrCode: '',
            // 价格
            price: '360.00',
            // 订单编号
            code: '',
            // 二维码路径
            qrCode: ''
        }
    },
    mounted () {
        this.code = this.$route.query.code
        this.price = this.$route.query.price
        this.qrCode = this.$route.query.qrCode
        this.name = this.$route.query.scenicName
        // 解析二维码路径，生成二维码路径
        this.prCode()
        const timer = setInterval(()=>{
            // 这里调用调用需要执行的方法，1为自定义的参数，由于特殊的需求它将用来区分，定时器调用和手工调用，然后执行不同的业务逻辑
            this.$axios.get('http://127.0.0.1:8082/orders/ticket/getOrderQuery?code=' + this.code).then(res => {
                if(res.data.obj.tradeStatus === 'TRADE_SUCCESS') {
                    // 销毁定时器
                    clearInterval(timer)
                    this.$router.push({name : 'PurchaseSuccess'})
                }
            })
        }, 5000) // 每两秒执行1次
        // 通过$once来监听定时器，在beforeDestroy钩子可以被清除
        this.$once('hook:beforeDestroy',()=>{
            // 在页面销毁时，销毁定时器
            clearInterval(timer)
        })
    },
    methods: {
        prCode () {
            console.log(this.qrCode)
            console.log(this.price)
            console.log(this.code)
            let opts = {
                errorCorrectionLevel: "H",//容错级别
                type: "image/png",//生成的二维码类型
                quality: 0.3,//二维码质量
                margin: 2,//二维码留白边距
                width: 210,//宽
                height: 180,//高
                color: {
                    dark: "#333333",//前景色
                    light: "#fff"//背景色
                }
            }
            this.QRCodeMsg = this.qrCode; //生成的二维码为URL地址js
            let msg = document.getElementById("QRCode_header");
            // 将获取到的数据（val）画到msg（canvas）上
            this.$QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
            })
        }
    }
}
</script>

<style scoped>
#alipay{
    width: 100%;
    height: 100%;
    background-color: #EFF0F1;
}
.alipay_div1{
    width: 65%;
    height:700px;
    margin: 0 auto;
}
.alipay_div1_div1{
    width: 100%;
    height: 100%;
    background-color: white;
    border-top: #B3B3B3 5px solid;
    border-bottom: #B3B3B3 5px solid;
    position: relative;
}
.alipay_qr_code{
    width: 220px;
    height: 270px;
    border: #B3B3B3 1px solid;
    margin-top: 20px;
}
.alipay_div1_div1_usage{
    position: absolute;
    top: 2%;
    left: 61%;
}
.alipay_header{
    width: 100%;
    height: 60px;
    background-color: white;
    line-height: 60px;
    overflow: hidden;
}
.alipay_header_div1{
    width: 65%;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
}
.qr_code{
    width: 100%;
    height: 200px;
}
#QRCode_header{
}
</style>
